<template>
  <div>
    <Header/>
    <div class="flex-border">
      <div>
        <br>
        <el-card class="box-card">
          <h4>注册账号</h4>
          <div class="flex-center">
            <i class="el-icon-success success"/>
            <h4>注册成功</h4>
            <el-button
              type="warning"
              @click="login">返回登录页面</el-button>
          </div>
        </el-card>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from "../frame/loginheader.vue";
import Footer from "../frame/footer.vue";

export default {
    components: {
        Header,
        Footer
    },
    data() {
        return {
            form: {
                region: "",
                username: "",
                password: "",
                code: "",
            }
        }
    },
    methods: {
        login() {
            this.$router.push("/login");
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.flex-border {
  display: flex;
  flex-direction: row;
  min-height: 550px;
  justify-content: space-around;
  border-top: 1px rgb(238, 172, 0) solid;
}
span {
  font-size: 12px;
}
.box-card {
  width: 500px;
}
.success {
    font-size: 160px;
    color: #FEAC00;
}
.flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
